<template>
  <div style="padding:10px;" class="basketball_com_list_panel">
    <div v-for="(data,mainIndex) in listItem" :key="mainIndex" >
      <div class="listItem" v-if="data.isShow==1">
        <div class="top">
          {{data.guest}}&nbsp;&nbsp;&nbsp;VS&nbsp;&nbsp;&nbsp;{{data.host}}
          <i
            class="iconfont icon-jiangjin"
            v-if="data.is_add_prize"
          ></i>
        </div>
        <div class="center flexBox">
          <div :class="['center_left_box',{'play_type2':is_type!='7'}]">
            <p class="match_icon">
              <span class="icons">{{data.Num}}</span>
            </p>
            <p class="match_type">{{data.match_name}}</p>
            <p class="match_time">{{data.overDateTime}}截止</p>
          </div>
          <!-- 混合过关 type 5 -> data 2  type 3 -> data 4-->
          <template v-if="is_type == '7'">
            <div class="center_center_box">
              <p class="purple">让分</p>
              <p class="blue">大小分</p>
            </div>
            <div class="center_right_box flexBox">
              <div class="normal hybrid_data">
                <div class="text_box flexBox">
                  <div
                    :class="['item',{'chose':data.odds_2[0].is_choice}]"
                    @click="chose(data.odds_2[0],2,data)"
                  >
                    <span>{{data.odds_2[0].value|mapKeyName(2)}}</span>
                    <span class="odds">{{data.odds_2[0].odds}}</span>
                  </div>
                  <div class="item mark">{{data.rq|compareProfit}}</div>
                  <div
                    :class="['item',{'chose':data.odds_2[1].is_choice }]"
                    @click="chose(data.odds_2[1],2,data)"
                  >
                    {{data.odds_2[1].value|mapKeyName(2)}}
                    <span class="odds">{{data.odds_2[1].odds}}</span>
                  </div>
                </div>
                <div class="text_box flexBox">
                  <div
                    :class="['item',{'chose':data.odds_4[0].is_choice }]"
                    @click="chose(data.odds_4[0],4,data)"
                  >
                    {{data.odds_4[0].value|mapKeyName(4)}}
                    <span class="odds">{{data.odds_4[0].odds}}</span>
                  </div>
                  <div class="item mark">{{data.sd}}</div>
                  <div
                    :class="['item',{'chose':data.odds_4[1].is_choice}]"
                    @click="chose(data.odds_4[1],4,data)"
                  >
                    {{data.odds_4[1].value|mapKeyName(4)}}
                    <span class="odds">{{data.odds_4[1].odds}}</span>
                  </div>
                </div>
              </div>
              <div class="more" @click="handleClick(data)">
                <p class="chose" v-if="getChoseNumber(data)">
                  已选
                  <br>
                  {{getChoseNumber(data)}}项
                </p>
                <p v-else>展开</p>
              </div>
            </div>
          </template>
          <!-- 让分 type 5 -> data 2 -->
          <template v-if="is_type == '5'">
            <div class="center_right_box flexBox play_type2">
              <div class="normal">
                <div class="text_box flexBox">
                  <div
                    :class="['item',{'chose':data.odds_2[1].is_choice }]"
                    @click="chose(data.odds_2[1],2,data)"
                  >
                    {{data.odds_2[1].value|mapKeyName(2)}}
                    <span class="odds">{{data.odds_2[1].odds}}</span>
                  </div>
                  <div class="item mark">{{data.rq|compareProfit}}</div>
                  <div
                    :class="['item',{'chose':data.odds_2[0].is_choice }]"
                    @click="chose(data.odds_2[0],2,data)"
                  >
                    {{data.odds_2[0].value|mapKeyName(2)}}
                    <span class="odds">{{data.odds_2[0].odds}}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 大小分 type 3 -> data 4 -->
          <template v-if="is_type == '3'">
            <div class="center_right_box flexBox play_type2">
              <div class="normal">
                <div class="text_box flexBox">
                  <div
                    :class="['item',{'chose':data.odds_4[0].is_choice }]"
                    @click="chose(data.odds_4[0],4,data)"
                  >
                    {{data.odds_4[0].value|mapKeyName(4)}}
                    <span class="odds">{{data.odds_4[0].odds}}</span>
                  </div>
                  <div class="item mark">{{data.rq|compareProfit}}</div>
                  <div
                    :class="['item',{'chose':data.odds_4[1].is_choice }]"
                    @click="chose(data.odds_4[1],4,data)"
                  >
                    {{data.odds_4[1].value|mapKeyName(4)}}
                    <span class="odds">{{data.odds_4[1].odds}}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 大小分 type 6 -> data 1 -->
          <template v-if="is_type == '6'">
            <div class="center_right_box flexBox play_type2">
              <div class="normal">
                <div class="text_box flexBox">
                  <div
                    :class="['item',{'chose':data.odds_1[1].is_choice }]"
                    @click="chose(data.odds_1[1],1,data)"
                  >
                    {{data.odds_1[1].value|mapKeyName(1)}}
                    <span class="odds">{{data.odds_1[1].odds}}</span>
                  </div>

                  <div class="item mark">{{data.rq|compareProfit}}</div>
                  <div
                    :class="['item',{'chose':data.odds_1[0].is_choice }]"
                    @click="chose(data.odds_1[0],1,data)"
                  >
                    {{data.odds_1[0].value|mapKeyName(1)}}
                    <span class="odds">{{data.odds_1[0].odds}}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 大小分 type 4 -> data 3 -->
          <template v-if="is_type == '4'">
            <div class="sfc_data" @click="handleClick(data)">
              <span class="span_text">展开投注区</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: this.listItem,
      playType: 7
    };
  },
  props: {
    is_type: { type: Number, default: 7 }, //玩法的类型
    listItem: { type: [Object, Array], default: null }
  },
  filters: {
    mapKeyName(value, type) {
      let name = "";
      if (type === 1) {
        switch (value) {
          case "00":
            name = "客胜";
            break;
          case "03":
            name = "主胜";
            break;
        }
      } else if (type === 2) {
        switch (value) {
          case "00":
            name = "让客胜";
            break;
          case "03":
            name = "让主胜";
            break;
        }
      } else if (type === 3) {
        switch (value) {
          case "00":
            name = "让客胜";
            break;
          case "03":
            name = "让主胜";
            break;
        }
      } else if (type === 4) {
        switch (value) {
          case "00":
            name = "小";
            break;
          case "03":
            name = "大";
            break;
        }
      }
      return name;
    },
    week_time(value, type) {
      if (!value) return "00:00";
      if (type) {
        return value.substring(2, 5);
      } else {
        return value.substring(0, 2);
      }
    }
  },
  computed: {
    getChoseNumber() {
      return function(data) {
        let oddsList = ["odds_1", "odds_2", "odds_3", "odds_4"];
        let number = oddsList.reduce((accont, key) => {
          let values = data[key];
          if (values) {
            //存在数据
            values.forEach(item => {
              if (item.is_choice) {
                accont++;
              }
            });
          }
          return accont;
        }, 0);

        return number;
      };
    },
    is_types: function() {
      return 0;
    },
    //混合过关计算选择项数量
    is_statistics(index) {
      return function(index) {
        let _this = this.listItem[index];

        let _number = 0;

        let _odds_2 = _this.odds_2;
        for (let i = 0; i < _odds_2.length; i++) {
          if (_odds_2[i].is_choice) {
            _number++;
          }
        }
        let _odds_3 = _this.odds_3;
        for (let i = 0; i < _odds_3.length; i++) {
          if (_odds_3[i].is_choice) {
            _number++;
          }
        }
        let _odds_4 = _this.odds_4;
        for (let i = 0; i < _odds_4.length; i++) {
          if (_odds_4[i].is_choice) {
            _number++;
          }
        }
        let _odds_5 = _this.odds_5;
        for (let i = 0; i < _odds_5.length; i++) {
          if (_odds_5[i].is_choice) {
            _number++;
          }
        }

        _number = _number > 9 ? _number : "0" + _number;
        return _number;
      };
    }
    //半全场 显示选择已选择项目
    // type6_list: function() {
    //   let _data = [];
    //   let _is_type = this.is_type;
    //   let _odds;
    //   if (_is_type == 6) {
    //     _odds = this.is_data.odds_6;
    //   } else if (_is_type == 4) {
    //     _odds = this.is_data.odds_4;
    //   } else {
    //     console.log("this is bug", _is_type);
    //     return _data;
    //   }
    //   for (let i = 0; i < _odds.length; i++) {
    //     if (_odds[i].is_choice) {
    //       _data.push(_odds[i]);
    //     }
    //   }
    //   return _data;
    // }
  },
  methods: {
    // 查看更多
    handleClick(item) {
      this.$emit("queryMoreDate", item);
    },
    // is_choice 属性管理
    checkIsChoice(attr, obj) {
      if (attr === undefined || attr == false) {
        obj.is_choice = false;
        return false;
      } else {
        return true;
      }
    },
    chose(item, type, data) {
      item.is_choice = !item.is_choice;
      // debugger;
      this.$emit("getChooseItem", [data, item.is_choice]);
    }
  }
};
</script>
<style scoped lang="less">
.basketball_com_list_panel {
  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse-item {
    .van-cell:not(:last-child)::after {
      left: 0;
    }
  }
  .van-collapse-item__wrapper {
    background-color: #f4f4f4;
  }
  .flexBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eaeaea;
  }
  .flexBox:last-child {
    // border: 1px solid #eaeaea;
    border-bottom: none;
  }
  .listItem {
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    margin-bottom: 11px;
    overflow: hidden;
    .text_box.flexBox{
        border:none;
        border-bottom: 1px solid #eaeaea;
    }

    .icon-jiangjin {
      color: @theme-color;
    }
    .center {
      .sfc_data {
        flex: 1;
        padding: 0 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // border: 1px solid #eaeaea;
        color: #333;
        font-size: 12px;
        text-align: center;
        line-height: 57px;
      }
    }
  }
  .top {
    list-style: none;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #333;
    background-color: #fbfbfc;
  }
  .center {
    .center_left_box {
      width: 80px;
      height: 80px;
      // border-right: 1px solid #eaeaea;
      text-align: center;
      &.play_type2 {
        height: 58px;
        text-align: center;
        border-right: 1px solid #eaeaea;
        .match_icon {
          margin-top: 5px;
        }
      }
      .match_icon {
        margin: 15px auto 2px;
        text-align: center;
        // font-size: 0;
      }
      .icons {
        padding: 2px 9px;
        font-size: 10px;
        color: #fff;
        text-align: center;
        background: #333333;
        border-radius: 8px;
        vertical-align: middle;
      }
      .match_type {
        font-size: 10px;
        line-height: 14px;
        color: #333;
        font-weight: 600;
      }
      .match_time {
        // .font(12px, 17px, #808080);
        font-size: 12px;
        line-height: 17px;
        color: #808080;
      }
    }
  }

  .center_center_box {
    width: 18px;
    height: 80px;
    // border-top: 1px solid #eaeaea;
    font-size: 10px;
    line-height: 14px;
    color: #808080;
    background-color: #f4f4f4;

    .purple,
    .blue {
      height: 40px;
      display: flex;
      align-items: center;
      text-align: center;
    }
    .purple {
      height: 37px;
      border-top: 0;
      color: #b18ae0;
    }
    .blue {
      color: #5bb2ff;
      line-height: 12px;
    }
  }
  .center_right_box.flexBox{
    border:none;
  }
  .center_right_box {
    // border-top: 1px solid #eaeaea;
    // border-left: 1px solid #eaeaea;
    height: 80px;
    .hybrid_data{
      border-right: 1px solid #eaeaea;
    }
    &.play_type2 {
      flex: 1;
      height: 58px;
      .normal {
        flex: 1;
       
        .flexBox {
          border: none;
        }
      }
      .item {
        flex: 1;
        height: 58px;
        line-height: 58px;
        border-bottom: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .mark {
        flex: 0 0 78px;
      }
    }
    .normal {
      // .font(12px, 40px, #333);
      font-size: 12px;
      line-height: 40px;
      color: #333;
      text-align: center;
    }
    .odds {
      color: #9b9b9b;
    }
    .item {
      width: 85px;
      flex: 1;
      height: 40px;
      line-height: 40px;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-right: 1px solid #eaeaea;
    }
    .item:last-child {
      border-right: 0;
    }
    .mark {
      width: 58px;
      color: #ff4536;
    }
    .more {
      width: 33px;
      height: inherit;
      // .font(10px, 14px, #333);
      font-size: 10px;
      line-height: 14px;
      color: #333;
      text-align: center;
      // border-left: 1px solid #eaeaea;
      p {
        display: table-cell;
        width: inherit;
        height: inherit;
        vertical-align: middle;
      }
    }
    .chose {
      color: #ff4536;
    }
    .item.chose {
      background-color: #ff4536;
      color: #fff;
      .odds {
        color: #fff;
      }
    }
  }
}
</style>